"use client";
import { Button, Card, Space, Typography } from "antd";
import Title from "antd/es/typography/Title";
import MdViewer from "@/components/MdViewer";
import "./index.css";
import TagList from "@/components/TagList";
import useAddUserSignInRecord from "@/hooks/useAddUserSignInRecord";
import useRecordQuestionView from "@/hooks/useRecordQuestionView";
import React, { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import type { RootState } from "@/stores";
import { EyeInvisibleOutlined, EyeTwoTone, LoginOutlined } from "@ant-design/icons";

interface Props {
    question: API.QuestionVO;
}

/**
 * 题目卡片组件
 * @param props
 * @constructor
 */
const QuestionCard = (props: Props) => {
    const { question } = props;
    useAddUserSignInRecord();
    useRecordQuestionView(question.id);
    // 从全局状态获取登录用户
    const loginUser = useSelector((state: RootState) => state.loginUser);
    // 是否已登录（非 not_login 视为已登录）
    const isLoggedIn = useMemo(() => !!loginUser?.id && loginUser.userRole && loginUser.userRole !== "not_login", [loginUser]);
    // 控制答案显示的本地状态（仅对已登录用户可切换）
    const [showAnswer, setShowAnswer] = useState<boolean>(false);
    return (
        <div className="question-card">
            <Card bordered={false}>
                <Title level={1} style={{ fontSize: 24 }}>
                    {question.title}
                </Title>
                <TagList tagList={question.tagList} />
                <div style={{ marginBottom: 16 }} />
                <MdViewer value={question.content} />
            </Card>
            <div style={{ marginBottom: 16 }} />
            <Card
                title={
                    <Space size={12}>
                        <span>推荐答案</span>
                        {/* 已登录显示切换按钮；未登录显示登录引导 */}
                        {isLoggedIn ? (
                            <Button
                                size="small"
                                type="primary"
                                icon={showAnswer ? <EyeInvisibleOutlined /> : <EyeTwoTone />}
                                onClick={() => setShowAnswer((v) => !v)}
                            >
                                {showAnswer ? "隐藏答案" : "显示答案"}
                            </Button>
                        ) : (
                            <Button
                                size="small"
                                type="primary"
                                icon={<LoginOutlined />}
                                onClick={() => {
                                    // 未登录：引导去登录并带上回跳地址
                                    window.location.href = `/user/login?redirect=${encodeURIComponent(window.location.href)}`;
                                }}
                            >
                                登录后查看答案
                            </Button>
                        )}
                    </Space>
                }
                bordered={false}
                className={!isLoggedIn || !showAnswer ? "answer-card masked" : "answer-card"}
            >
                {/*
                 * 未登录：不显示答案内容，给出半透明遮罩和提示
                 * 已登录但未点击显示：同样遮罩隐藏
                 * 已登录且显示：渲染答案 Markdown
                 */}
                {isLoggedIn && showAnswer ? (
                    <MdViewer value={question.answer} />
                ) : (
                    <div className="answer-mask">
                        <Typography.Paragraph className="answer-mask-text">
                            {isLoggedIn ? "点击上方“显示答案”查看" : "登录后可查看答案"}
                        </Typography.Paragraph>
                    </div>
                )}
            </Card>
        </div>
    );
};

export default QuestionCard;
